<template>
    <div class="form">
        <page-info-title :title="$t('application.form.itemInfo')"></page-info-title>
        <div class="top">
            <div class="group_one1">
                <div class="group_two">
                    <div class="group_three">
                        <page-input :title="$t('application.form.itemName')" :required="true"
                            :placeholder="$t('application.form.enterItemName')" :disabled="disabled"
                            @message="(e) => { form.itemName = e }" :history="oldParams.itemName || ''"></page-input>
                        <div class="line"></div>
                    </div>
                    <div class="group_three">
                        <input-title :title="$t('application.form.itemLogo')" :required="true"></input-title>
                        <div class="logo-load">
                            <show-load :placeholder="$t('application.form.enterItemLogo')" accept=".png,.jpeg,.jpg,.pdf"
                                :size="15" :disabled="disabled" @message="(e) => { form.itemLogo = e }"
                                :history="oldParams.itemLogo || ''"></show-load>
                        </div>
                    </div>
                </div>
                <div class="group_two">
                    <div class="group_three">
                        <div class="demo-description">
                            <page-input-textarea :title="$t('application.form.itemIntro')"
                                :placeholder="$t('application.form.enterItemIntro')" :max="1000" :required="true"
                                height="5.44rem" :disabled="disabled" @message="(e) => { form.itemIntro = e }"
                                :history="oldParams.itemIntro || ''"></page-input-textarea>
                        </div>
                    </div>
                </div>
            </div>
            <div class="group_one2">
                <input-title :title="$t('application.form.itemPoster')" :required="true"></input-title>
                <div class="poster-load">
                    <show-load :placeholder="$t('application.form.enterItemPoster')" accept=".png,.jpeg,.jpg,.pdf"
                        :size="15" :disabled="disabled" @message="(e) => { form.itemPoster = e }"
                        :history="oldParams.itemPoster || ''"></show-load>
                </div>
            </div>
        </div>
        <div class="bottom">
            <input-title :title="$t('application.form.otherTitle')"></input-title>
            <div class="pdf-upload">
                <div class="pdf">
                    <file-load accept=".pdf" :size="1" :placeholder="$t('application.form.o2')" :required="true"
                        :disabled="disabled" @message="(e) => { form.faithConsent = e }"
                        :history="oldParams.faithConsent || ''"
                        :telplates="$i18n.locale === 'zh' ?
                        'https://originstar.oss-cn-shanghai.aliyuncs.com/contest/doc/%E8%AF%9A%E4%BF%A1%E6%89%BF%E8%AF%BA%E4%B9%A6.docx' :
                        'https://originstar.oss-cn-shanghai.aliyuncs.com/contest/doc/Integrity%20Declaration%20Form.docx'"></file-load>
                </div>
                <div class="pdf">
                    <file-load accept=".pdf" :size="1" :placeholder="$t('application.form.o3')" :disabled="disabled"
                        @message="(e) => { form.bioethicsConsent = e }" :history="oldParams.bioethicsConsent || ''"
                        :telplates="$i18n.locale === 'zh' ?
                        'https://originstar.oss-cn-shanghai.aliyuncs.com/contest/doc/%E7%94%9F%E7%89%A9%E4%BC%A6%E7%90%86%E6%89%BF%E8%AF%BA%E4%B9%A6.docx'
                        : 'https://originstar.oss-cn-shanghai.aliyuncs.com/contest/doc/Bioethics%20and%20Biosafety%20Consent%20Conform.docx'"></file-load>
                </div>
            </div>
        </div>
    </div>
</template>

<script>
import pageInfoTitle from './page-info-title.vue'
import pageInput from './page-input.vue';
import pageInputTextarea from './page-input-textarea.vue';
import inputTitle from './input-title.vue';
import fileLoad from './file-load.vue';
import showLoad from "./show-load.vue";
export default {
    props: {
        disabled: {
            type: Boolean,
            default: false
        },
        oldParams: {
            type: [Array, Object],
            default: []
        }
    },
    components: {
        pageInfoTitle,
        pageInput,
        pageInputTextarea,
        inputTitle,
        fileLoad,
        showLoad
    },
    data() {
        return {
            form: {
                itemName: "", //项目名称
                itemLogo: "", //项目logo
                itemIntro: "", //项目简介
                itemPoster: "", //项目海报
                schoolConsent: "test", //校方同意书
                bioethicsConsent: "", //生物伦理承诺书
                faithConsent: "", //诚信承诺书
            }
        }
    },
    watch: {
        form: {
            deep: true,
            handler(newVal, oldVal) {
                this.$emit('message', newVal)
            },
            immediate: true
        }
    }
}
</script>

<style lang="less" scoped>
.form {
    padding: 0.64rem 1.49rem;
    background: rgba(253, 253, 254, 0.25);
    border: 0.05rem solid #FFFFFF;
    backdrop-filter: blur(10px);
}

.top {
    display: flex;
    align-items: flex-start;

    .group_one1 {
        display: flex;
        flex-direction: column;
        flex: 1;

        .group_two {
            margin-bottom: 0.64rem;
            display: flex;
            align-items: flex-start;

            .group_three {
                flex: 1;
                margin-right: 1.47rem;

                .line {
                    width: 9.68rem;
                    border-bottom: 1px solid #C5C5CA;
                    margin-top: 1.25rem;
                }

                .logo-load {
                    width: 9.68rem;
                    height: 3.31rem;
                }

                .video-load {
                    width: 9.68rem;
                    height: 5.44rem;
                }
            }
        }
    }

    .group_one2 {
        width: 9.68rem;

        .poster-load {
            width: 9.68rem;
            height: 10.43rem;
        }
    }
}

.bottom {
    .pdf-upload {
        display: flex;
        align-items: flex-start;
        flex-wrap: wrap;

        .pdf {
            width: 9.71rem;
            margin-top: 0.11rem;
            margin-right: 1.35rem;
        }

        .pdf:nth-of-type(3n) {
            margin-right: 0 !important;
        }
    }

}
</style>

